<template>
  <view class="popup-content">
    <view class="popup-title">
      <text>{{ title }}</text>
      <view class="popup-cancel" @click="closePopup">
        <eui-uicons type="closeempty" size="36" color="#888888" />
      </view>
    </view>
    <view class="popup-default-content">
      <eui-card-input v-model="formatData.personName" title="处理人"  h-padding="0" type="textname"
                      ref="inputUser" rightIconType="right" @iconClick="userFunc" placeholder="请选择处理人"
                      :required="true"/>
    </view>
<!--    <view class="line-view" />-->
    <view class="popup-default-content">
      <eui-card-input :value="formatData.costTime" title="预估用时（分钟）"  h-padding="0" type="text" :displayable="true"
                      ref="inputCostTime" rightIconType="" @iconClick="click('inputUser')" placeholder="请输入预估用时"
                      @confirm="costTimeFunc" isBlur :titleWidth="245" maxlength="8"/>
    </view>
<!--    <view class="line-view" />-->
    <view class="popup-default-content">
      <eui-card-input :value="dayjs(formatData.startTime).format('YYYY-MM-DD HH:mm')" title="开始时间"  h-padding="0" type="text" :displayable="true"
                      ref="inputStartDatetime" @iconClick="click('inputUser')" placeholder="请选择开始时间" />
    </view>
<!--    <view class="line-view" />-->
    <view class="popup-default-content">
      <eui-card-input :value="dayjs(formatData.endTime).format('YYYY-MM-DD HH:mm')" title="结束时间"  h-padding="0" type="text" :displayable="true"
                      ref="inputEndDatetime" @iconClick="click('inputUser')" placeholder="请选择结束时间" />
    </view>
<!--    <view class="line-view" />-->
    <view class="popup-tips">
      <text class="tips-text">
        <eui-uicons type="info" size="28" :color="themeColor" style="margin-top: 2rpx" />
        {{ message }}
      </text>
    </view>
    <view class="popup-bottom">
      <eui-button :title="btnTitle" type="max" maxWidth="440" @buttonClick="buttonClick" />
    </view>
  </view>
</template>

<script setup type="ts">
import { ref, defineProps, watch, defineEmits, onMounted } from 'vue';
import { storeToRefs } from 'pinia';
import { useThemeStore } from '@/store/themeStore';
import dayjs from 'dayjs';
const themeStore = useThemeStore(); // 主题
const { theme } = storeToRefs(themeStore);
const themeColor = ref(theme._object.theme == 'theme-blue' ? '#02B7E6' : '#FF6430')

const message = ref('');
const isButtonDisabled = ref(false); // 按钮是否禁用
const buttonDisableDuration = ref(600); // 按钮禁用时间
const popup = ref(null);

const emit = defineEmits(["clickFunc", "hidePopup", "userFunc", "costTimeFunc"]);

const props = defineProps({
  /**
   * 标题
   * */
  title: {
    type: String,
    default: '派工给指定人员'
  },
  /**
   * 内容
   * */
  formatData: {
    type: Object,
    default: {
      personName: '', // 处理人
      personId: '', //
      costTime: 30, // 预估时间
      startTime: '', // 开始时间
      endTime: '', // 结束时间
    }
  },
  /**
   * 提示说明
   * */
  msg: {
    type: String,
    default: '说明: 给指定人员派送任务时，需要对方已经上线，并且对方接受任务的指派之后才能开工处理。'
  },
  /**
   * 按钮标题
   * */
  btnTitle: {
    type: String,
    default: '指派'
  },
});

const setDefault = (msg) => {
  message.value = msg;
};

watch(
    () => props.msg,
    (newData) => {
      setDefault(newData);
    }
)

onMounted(() => {
  setDefault(props.msg);
});

const click = (e) => {
  if (isButtonDisabled.value) return;
  isButtonDisabled.value = true;




  setTimeout(() => {
    isButtonDisabled.value = false;
  }, buttonDisableDuration.value);
}

const closePopup = () => {
  if (isButtonDisabled.value) return;
  isButtonDisabled.value = true;
  emit('hidePopup');
  setTimeout(() => {
    isButtonDisabled.value = false;
  }, buttonDisableDuration.value);
}

const buttonClick = () => {
  if (isButtonDisabled.value) return;
  isButtonDisabled.value = true;
  emit('clickFunc');
  setTimeout(() => {
    isButtonDisabled.value = false;
  }, buttonDisableDuration.value);
}

// 处理人
const userFunc = () => {
  console.log('处理人: ');
  emit('userFunc');
}

// 用时
const costTimeFunc = () => {
  console.log('=====props.formatData: ', props.formatData);
  let { costTime } = props.formatData;
  if (!costTime) return;
  let timeNum = parseInt(costTime);
  if (isNaN(timeNum) || timeNum < 30) {
    props.formatData.costTime = '';
    uni.showToast({
      duration: 3500,
      icon: 'none',
      title:'预估用时（分钟）不能小于30',
      mask: true,
    });
    return;
  }
  emit('costTimeFunc');
}

</script>

<style lang="scss" scoped>
@import '@/main.scss';

.popup-content {
  width: 100%;
  height: 100%;
  background: $uni-bg-color-inverse;
  border-radius: 20rpx;
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
}
.popup-title {
  width: 100%;
  height: 85rpx;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: $uni-font-family;
  font-weight: $uni-font-weight-level1;
  color: $uni-text-color-primary;
  font-size: $uni-font-size-level1;
  line-height: 45rpx;
  box-sizing: border-box;
  border-bottom: 1rpx solid $uni-line-color;
}
.popup-cancel {
  width: 50rpx;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 16rpx;
}
.popup-default-content {
  width: 602rpx;
  height: 88rpx;
  display: flex;
  box-sizing: border-box;
  margin-left: 28rpx;
  padding-right: 28rpx;
}
.line-view {
  width: 602rpx;
  height: 1rpx;
  margin-left: 28rpx;
  background: $uni-line-color;
  border-radius: 10rpx 10rpx 0 0;
}
.popup-tips {
  width: 574rpx;
  height: 68rpx;
  display: flex;
  font-style: normal;
  margin: 20rpx 28rpx;
  padding: 4rpx 20rpx;
  border-radius: 10rpx;
  background: rgba(1,126,255,0.05);
  flex-direction: row;
  box-sizing: border-box;
  .tips-text {
    font-family: $uni-font-family;
    font-weight: $uni-font-weight-level1;
    color: $uni-text-color-title;
    font-size: $uni-font-size-level7;
    line-height: 30rpx;
  }
}
.popup-bottom {
  width: 100%;
  height: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
